<template>
    <div class="dd" >
        <nav-bar></nav-bar>
        <div class="dd1">{{game.gname}}</div>
        <van-image
    width="100%"
    height="100%"
    fit="contain"
    :src="`${game.gimg}`"
    />

    <div class="dd2">开发商:{{game.gkf}}</div>
    <div class="dd2">发行商:{{game.gfx}}</div>
    <div class="dd2">
        {{game.gjs}}
    </div>
    <div class="dd3">标签
        <div class="dd31" >
            <van-button v-for="(item,i) in tag" :key="i" color="rgba( 103, 193, 245, 0.2 )" size="mini" type="info">{{item}}</van-button>
        </div>
    </div>
    <div class="dd4">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item>
        <van-image
        fit="contain"
  width="100%"
  height="100%"
  :src="`${simg.simg1}`"
/>
    </van-swipe-item>
    <van-swipe-item>
        <van-image
        fit="contain"
  width="100%"
  height="100%"
  :src="`${simg.simg2}`"
/>
    </van-swipe-item>
        <van-swipe-item>
        <van-image
        fit="contain"
  width="100%"
  height="100%"
  :src="`${simg.simg3}`"
/>
    </van-swipe-item>
        <van-swipe-item>
        <van-image
        fit="contain"
  width="100%"
  height="100%"
  :src="`${simg.simg4}`"
/>
    </van-swipe-item>
    </van-swipe>
</div>
<div class="dd5">
<div class="dd51">
    购买  {{game.gname}}
</div>
    <div class="dd52">
    <van-button @click="goshop" color="#4c6b22" type="primary">添加至购物车</van-button>
</div>
<div class="dd53">{{game.gprice}}</div>
<div style="font-size:0.6rem;margin-bottom:0.2rem;">现价</div>
</div>



    <van-goods-action style="height:60px">
  <van-goods-action-icon color="white" class="v1" icon="chat-o" text="客服"  />
  <van-goods-action-icon v-if="$store.state.gnum==0" to="./Goshop" color="white" class="v2" icon="cart-o" text="购物车"  />
  <van-goods-action-icon v-else-if="$store.state.gnum" to="./Goshop" color="white" class="v2" icon="cart-o" text="购物车" :badge="`${$store.state.gnum}`" />
   <van-goods-action-icon v-else to="./Goshop" color="white" class="v2" icon="cart-o" text="购物车"  />
  <van-goods-action-icon color="white" class="v3" icon="shop-o" text="发行商"  />
</van-goods-action>
<div class="dd6"></div>

    </div>
</template>
<style scoped>
.dd{
    background-color: #1b2838;
}
.dd1{
    color: white;
    background-color: #171a21;
    text-align: center;
    font-size: 0.7rem;
}
.dd2{
    color: #c6d4df;
    font-size: 0.3rem;
}
.my-swipe .van-swiper-item{
    width: 100%;
    height: 300;
}
.dd3{
    color: #8A97A0;
    font-size: 0.4rem;
}
.dd31{
    margin-bottom: 0.4rem;
}
.dd31 span{
    color: #67C1F5;
}
.dd4{
    margin-bottom: 0.3rem;
}
.dd5{
    margin-bottom: 1rem;
    /* height: 3.0rem; */
    background: linear-gradient( 
-60deg, rgba(226,244,255,0.3) 5%,rgba(84, 107, 115, 0.3) 95%);
    padding: 0.2rem;
}
.dd51{
    color: #B0AEAC;
    font-size: 0.6rem;
    line-height: 1rem;
    
}
.dd52{
    /* position: absolute; */
    /* bottom: 0; */right: 0;
    
    color: #ACDB5F;
    font-size: 0.4rem;
    float: right;
}
.dd53{
    /* position: absolute; */
    color: #ACDB5F;
    font-size: 0.4rem;
    line-height: 1rem;

    right: 2.5rem;
    float: right;
}
.v1{
    margin-right: 1rem;
}
.v2{
    
    margin-left: 0.7rem;
}
.v3{
    margin-left: 1.7rem;
}
.van-goods-action{
    
    background-color: #1b2838;
}
.van-goods-action-icon{
    background-color: #1b2838;
}
.dd6{
    margin-top: 1rem;
}

</style>
<script>
import NavBar from '../components/db.vue'
export default {
        name:'home',
    components:{
        NavBar
    },
    data() {
        return {
            login:sessionStorage.getItem('islogin'),
            k:'',
            onClickIcon:'',
            game:'',
            tag:'',
            tag1:'',
            tag2:'',
            tag3:'',
            gnum:'',
            simg:'',
            date:'',
        }
    },
    methods: {
        goshop(){
            if(this.$store.state.islogin==true){
            
            this.date=new Date()
            this.axios.post('/goshop',
            `gid=${this.game.gid}&gimg=${this.game.gimg}&gname=${this.game.gname}&gjs=${this.game.gjs}&gtag1=${this.tag1}&gtag2=${this.tag2}&gtag3=${this.tag3}&gprice=${this.game.gprice}&gtime=${this.date.getTime()}`).then(result=>{
                            this.axios.get('/goshop').then(result=>{
this.$store.commit('spnum',result.data.result.length)
sessionStorage.setItem('gnum',result.data.result.length)


            })
            })

        }else{
            
            this.$router.push('/log')
        }}
    },
mounted(){

    let id=this.$route.query.id

    this.axios.get(`/details?id=${id}`).then(result=>{
        this.game=result.data.results[0]

        this.tag=this.game.gtag.split("，")

        this.tag1=this.tag[0];
        this.tag2=this.tag[1];
        this.tag3=this.tag[2];
        console.log(this.tag);
    })
    this.axios.get(`/img?id=${id}`).then(result=>{
 
        this.simg=result.data.result

    })
}
}
</script>